<template>
	<div class="device-health">
	  <el-row :gutter="18">
		<!-- 健康指数卡片 -->
		<el-col :xs="24" :md="8">
		  <el-card>
			<div style="font-weight:bold;margin-bottom:10px;">设备健康指数</div>
			<el-row :gutter="8">
			  <el-col :span="12" v-for="device in healthData" :key="device.id">
				<el-card shadow="hover" class="device-card">
				  <div style="font-size:1.2em;font-weight:bold;color:#67C23A;">
					{{ device.healthIndex }}
				  </div>
				  <div style="font-size:0.95em;color:#888;">{{ device.name }}</div>
				  <div style="font-size:0.9em;color:#aaa;">{{ device.code }}</div>
				</el-card>
			  </el-col>
			</el-row>
		  </el-card>
		</el-col>
  
		<!-- 故障预测趋势图 -->
		<el-col :xs="24" :md="8">
		  <el-card>
			<div style="font-weight:bold;margin-bottom:10px;">故障预测趋势</div>
			<div ref="trendChart" style="width:100%;height:220px;"></div>
		  </el-card>
		</el-col>
  
		<!-- 频谱分析图 -->
		<el-col :xs="24" :md="8">
		  <el-card>
			<div style="font-weight:bold;margin-bottom:10px;">频谱分析</div>
			<el-select v-model="selectedDevice" placeholder="选择设备" style="margin-bottom:8px;">
			  <el-option v-for="d in healthData" :key="d.id" :label="d.name" :value="d.id" />
			</el-select>
			<div ref="fftChart" style="width:100%;height:180px;"></div>
		  </el-card>
		</el-col>
	  </el-row>
	  <!-- 设备明细列表 -->
	  <el-card style="margin-top:18px;">
		<div style="font-weight:bold;margin-bottom:10px;">设备健康明细</div>
		<el-table :data="healthData" border size="small">
		  <el-table-column prop="code" label="设备编号" width="120" />
		  <el-table-column prop="name" label="设备名称" width="140" />
		  <el-table-column prop="type" label="设备类型" width="100" />
		  <el-table-column prop="location" label="安装位置" width="120" />
		  <el-table-column prop="healthIndex" label="健康指数" width="90">
			<template #default="scope">
			  <el-tag :type="scope.row.healthIndex<80 ? 'danger' : scope.row.healthIndex<90 ? 'warning' : 'success'">
				{{ scope.row.healthIndex }}
			  </el-tag>
			</template>
		  </el-table-column>
		  <el-table-column prop="lastCheck" label="上次巡检" width="120"/>
		  <el-table-column prop="desc" label="备注" />
		</el-table>
	  </el-card>
	</div>
  </template>
  
  <script setup>
  import { ref, onMounted, watch } from 'vue'
  import * as echarts from 'echarts'
  
  // 设备健康模拟数据
  const healthData = ref([
	{ id: 1, code: 'EQP-001', name: '压片机A', type: '压片机', location: '1号车间', healthIndex: 92, lastCheck: '2024-05-30', desc: '运行正常' },
	{ id: 2, code: 'EQP-002', name: '灌装机B', type: '灌装机', location: '2号车间', healthIndex: 85, lastCheck: '2024-05-28', desc: '轻微振动' },
	{ id: 3, code: 'EQP-003', name: '灭菌柜C', type: '灭菌柜', location: '3号车间', healthIndex: 77, lastCheck: '2024-05-27', desc: '建议维护' },
	{ id: 4, code: 'EQP-004', name: '贴标机D', type: '贴标机', location: '1号车间', healthIndex: 95, lastCheck: '2024-05-29', desc: '运行正常' }
  ])
  
  // 故障预测趋势数据
  const trendData = [
	{ date: '05-20', val: 3 },
	{ date: '05-22', val: 2 },
	{ date: '05-24', val: 5 },
	{ date: '05-26', val: 7 },
	{ date: '05-28', val: 6 },
	{ date: '05-30', val: 8 },
	{ date: '06-01', val: 9 },
	{ date: '06-03', val: 12 }
  ]
  const trendChart = ref()
  let chart1
  function renderTrendChart() {
	if (!chart1 && trendChart.value) chart1 = echarts.init(trendChart.value)
	if (!chart1) return
	chart1.setOption({
	  tooltip: { trigger: 'axis' },
	  grid: { left: 10, right: 20, top: 36, bottom: 30, containLabel: true },
	  xAxis: { type: 'category', data: trendData.map(d=>d.date) },
	  yAxis: { type: 'value', minInterval: 1 },
	  series: [{
		name: '预测故障数',
		type: 'line',
		smooth: true,
		symbol: 'circle',
		data: trendData.map(d=>d.val),
		areaStyle: { color: '#ffe0b3' },
		lineStyle: { width: 2, color: '#E6A23C' }
	  }]
	})
  }
  
  // 频谱分析模拟数据
  const fftDataAll = {
	1: [ {freq: 10, amp: 20}, {freq: 20, amp: 33}, {freq: 30, amp: 12}, {freq: 40, amp: 9}, {freq: 50, amp: 2} ],
	2: [ {freq: 10, amp: 17}, {freq: 20, amp: 29}, {freq: 30, amp: 15}, {freq: 40, amp: 13}, {freq: 50, amp: 8} ],
	3: [ {freq: 10, amp: 11}, {freq: 20, amp: 17}, {freq: 30, amp: 9}, {freq: 40, amp: 14}, {freq: 50, amp: 19} ],
	4: [ {freq: 10, amp: 22}, {freq: 20, amp: 12}, {freq: 30, amp: 18}, {freq: 40, amp: 7}, {freq: 50, amp: 3} ]
  }
  const selectedDevice = ref(1)
  const fftChart = ref()
  let chart2
  function renderFFTChart() {
	if (!chart2 && fftChart.value) chart2 = echarts.init(fftChart.value)
	if (!chart2) return
	const fftData = fftDataAll[selectedDevice.value]
	chart2.setOption({
	  tooltip: { trigger: 'axis' },
	  xAxis: { type: 'category', data: fftData.map(d=>d.freq+'Hz'), name: '频率' },
	  yAxis: { type: 'value', name: '幅值' },
	  grid: { left: 10, right: 39, top: 30, bottom: 30, containLabel: true },
	  series: [{
		name: '幅值',
		type: 'bar',
		barWidth: 22,
		data: fftData.map(d=>d.amp),
		itemStyle: { color: '#409EFF' }
	  }]
	})
  }
  
  // 监听设备选择
  watch(selectedDevice, renderFFTChart)
  
  onMounted(() => {
	setTimeout(renderTrendChart, 10)
	setTimeout(renderFFTChart, 10)
  })
  </script>
  
  <style scoped>
  .device-health {
	padding: 16px;
  }
  .device-card {
	margin-bottom: 8px;
	text-align: center;
  }
  </style>
  